<template>
  <div class="guide">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      v-if="false"
    >
      <van-swipe-item class="myswiptitem" v-for="(l, i) in imgs" :key="i">
        <img :src="l.imgSrc" class="gimg" alt="" />
        <van-button
          @click="gotopage('main')"
          v-if="i == imgs.length - 1"
          class="gbtn"
          type="primary"
          >开始电影之旅</van-button
        >
      </van-swipe-item>
    </van-swipe>

    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      v-if="false"
    >
      <van-swipe-item class="myswiptitem" v-for="(l, i) in banner" :key="i">
        <img :src="l.pic" class="gimg" alt="" />
        <van-button
          @click="gotopage('main')"
          v-if="i == banner.length - 1"
          class="gbtn"
          type="primary"
          >开始电影之旅</van-button
        >
      </van-swipe-item>
    </van-swipe>

    <my-swipe class="my-swipe" id="banner1" :options="options">
      <my-swipe-item v-for="(l, i) in banner" :key="i">
        <img :src="l.pic" class="gimg" alt="" />
        <van-button
          @click="gotopage('main')"
          v-if="i == banner.length - 1"
          class="gbtn"
          type="primary"
          >开始电影之旅</van-button
        >
      </my-swipe-item>
    </my-swipe>

    <div class="countdown" @click="gotopage('main')">倒计时{{ num }} S</div>
  </div>
</template>

<script>
var timer = null;
export default {
  // 局部混入

  name: "guide",
  data() {
    return {
      options: {
        loop: true,
        speed: 2500,
        observer: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
      num: 5,
      imgs: [
        {
          imgSrc: require("@/assets/images/img1.jpg"),
        },
        {
          imgSrc: require("@/assets/images/img2.jpg"),
        },
        {
          imgSrc: require("@/assets/images/img3.jpg"),
        },
        {
          imgSrc: require("@/assets/images/img4.jpg"),
        },
      ],
      banner: [],
    };
  },
  methods: {
    getBanner() {
      this.$axios.get("http://47.104.209.44:3333/banner?type=2").then((res) => {
        console.log(res);
        this.$nextTick(() => {
          this.banner = res.data.banners.slice(0, 5);
        });
      });
    },
  },
  created() {
    this.getBanner();
    // 判断一个星期只能看一次
    // visitTime
    var visitTime = this.getCookie("visitTime");
    console.log(visitTime);
    if (visitTime) {
      // 已经进来了 直接跳转
      this.gotopage("main");
    } else {
      this.setCookie("visitTime", 1, 7);
    }
  },
  mounted() {
    timer = setInterval(() => {
      if (this.num > 0) {
        this.num--;
      } else {
        clearInterval(timer);
        timer = null;
        this.gotopage("main");
      }
    }, 1000);
  },
  destroyed() {
    clearInterval(timer);
    timer = null;
  },
};
</script>

<style lang="scss" scoped>
.guide {
  width: 100%;
  height: 100%;
  position: relative;
  .countdown {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 120px;
    height: 34px;
    text-align: center;
    border: 1px solid rgb(116, 112, 112);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border-radius: 30px;
    line-height: 34px;
    z-index: 11;
  }
  .my-swipe {
    width: 100%;
    height: 100%;
    position: relative;
    .gbtn {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      //   background-color: rgb(230, 16, 16);
    }
    .gimg {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

